window.onload=function(){
    var canvas=document.getElementById('canvas');
    canvas.height=800;
    canvas.width=1200;
    var context=canvas.getContext('2d');
    context.fillStyle='red';
    context.beginPath();
    context.arc(800,300,30,0,2*Math.PI,true);
    context.closePath();
    context.fill();
    setInterval(function(){
        run(context);
    }, 20);
};
var speed=0;
var startPoint=800;
function run(cxt){
    speed=-7;
    cxt.clearRect(0,0,1200,800);
    startPoint+=speed;
    cxt.beginPath();
    cxt.arc(startPoint,300,30,0,2*Math.PI,true);
    cxt.closePath();
    cxt.fill();
};

var can = document.getElementById("canvas1");
can.height=800;
can.width=1200;
var pen = can.getContext("2d");

//脑袋

drawCircle(300, 180, 150, 0, 2, false, "rgb(80,170,230)");
drawCircle(300, 250, 150, 1.25, 1.75, false, "white"); //上脸
drawCircle(300, 170, 150, 0.25, 0.75, false, "white"); //下脸
drawCircle(270, 210, 100, 0.75, 1.25, false, "white");//左脸
drawCircle(330, 210, 100, 1.75, 0.25, false, "white");//右脸

//中间
pen.beginPath();
pen.fillRect(198, 140, 204, 140);
pen.closePath();

//
ellipseOne(pen,260,110,40,50);
ellipseOne(pen,340,110,40,50);
//眼珠
drawCircle(270,130,15,0,2,false,"black");
drawCircle(330,130,15,0,2,false,"black");
//
drawCircle(300,165,22,0,2,false,"red");
//竖线
beard(300,190,300,280);
//左胡子
beard(200,180,270,200);//1      
beard(200,210,270,210);//2      
beard(200,240,270,220);//3
//右胡子
beard(328,200,398,180);//1      
beard(328,210,398,210);//2      
beard(328,220,398,240);//3
//嘴巴
pen.beginPath();
pen.arc(300,145,150,0.25*Math.PI,0.75*Math.PI,false);
pen.stroke();
pen.closePath();

//切棱角
drawCircle(195,320,18,0.7,1.3,false,"red");
drawCircle(405,320,18,1.7,0.3,false,"red");
//脖子
pen.beginPath();
pen.fillRect(184,305,233,30);
pen.closePath();

//身子
pen.beginPath();
pen.fillStyle="rgb(80,170,230)";
pen.fillRect(190,335,222,180);
pen.closePath();
//胳膊
arm(190,335,140,395,175,425,190,405,"rgb(80,170,230)");
arm(190,405,190,514,285,514,285,514,"rgb(80,170,230)");
arm(316,514,412,514,412,405,412,405,"rgb(80,170,230)");
drawCircle(145,420,30,0,2,false,"white");
//右
arm(412,335,462,395,427,425,412,405,"rgb(80,170,230)");
drawCircle(457,420,30,0,2,false,"white");
//衣服
drawCircle(300,391,80,1.25,1.75,true,"white");
drawCircle(300,391,60,0,1,false,"white");
//铃铛
drawCircle(300,345,25,0,2,true,"yellow");
drawCircle(300,350,8,0,2,true,"black");//黑点
beard(300,350,300,370);//竖线
beard(283,327,318,327);//纹路
beard(275,338,325,338);
//门
drawCircle(300,511,16,0.1,0.9,true,"white");
//脚
pen.beginPath();

pen.lineTo(165,515);
pen.lineTo(287,515);
pen.arc(284,531,15,1.5*Math.PI,0.5*Math.PI,false);
pen.lineTo(287,547);
pen.lineTo(165,547);
pen.arc(165,531,15,0.5*Math.PI,1.5*Math.PI,false);
pen.lineTo(165,515);pen.closePath();
pen.fillStyle="white";pen.fill();
pen.stroke();

pen.beginPath();
drawCircle(317,531,15,0.5,1.5,false,"white");
drawCircle(436,531,15,1.5,0.5,false,"white");
pen.beginPath();
pen.fillStyle="white";
pen.fillRect(316,516,121,30);
pen.closePath();
//斜线
function arm(a,b,c,d,e,f,g,h,color){
    pen.beginPath();
    pen.lineTo(a,b);
    pen.lineTo(c,d);
    pen.lineTo(e,f);
    pen.lineTo(g,h);
    pen.stroke();
    pen.fillStyle=color;
    pen.fill();
    pen.closePath();
}

//线 两点
function beard(sx,sy,ex,ey){
    pen.beginPath();
    pen.lineTo(sx,sy);
    pen.lineTo(ex,ey);
    pen.stroke();
    pen.closePath();
}
//画圆
function drawCircle(center1, center2, radius, start, end, bol, color) {
    pen.beginPath();
    pen.arc(center1, center2, radius, start * Math.PI, end * Math.PI, bol);
    pen.fillStyle = color;
    pen.fill();
    pen.closePath();
    pen.stroke();
}

//椭圆
function ellipseOne(context, x, y, a, b) {//(圆心，圆心，宽，高)         
    var step = (a > b) ? 1 / a : 1 / b;
    context.beginPath();
    context.moveTo(x + a, y);
    for(var i = 0; i < 2 * Math.PI; i += step) {
        context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i));
    }
    context.closePath();
    context.fill();
    context.stroke();
}